import React from 'react';
import ResponsiveEmbed from 'react-responsive-embed';
import Layout from '../components/layout';
import SEO from '../components/seo';

import HeroImage from '../assets/lc-home-hero.svg';

import { SecondaryCard, LandingCard } from '../components/MarketingPages/Cards';
import '../components/MarketingPages/Buttons.scss';

import './index.scss';


const HeroStyle = {
  paddingBottom: '0px',
  paddingLeft: '24px',
  paddingTop: '48px',
};
const heroMargin = {
  margin: '0 auto',
  maxWidth: '1200px',
};
const landingBottom = {
  padding: '40px',
  backgroundColor: '#eaf2f8',
  marginTop: '80px',
};
const landingBottomContent = {
  padding: '32px',
};

const IndexPage = () => (
  <Layout>
    <SEO title="Home" slug="/" />
    <section className="hero" style={HeroStyle}>
      <div className="row" style={heroMargin}>
        <div className="col-lg-5 hero-text">
          <h2>Postman Learning Center</h2>
          <p>
The Postman Learning Center has all of the resources you
          need to ramp up quickly and extend your skills.
          </p>
          <a href="/docs/" className="btn btn__primary">Explore the Docs</a>
        </div>
        <div className="col-lg-7">
          <img src={HeroImage} className="hero-image" alt="Hero" />
        </div>
      </div>
    </section>
    <section className="row design">
      <div className="col-md-12 text-center">
        <h3>Design and Develop APIs</h3>
        <div className="row justify-content-center">
          <LandingCard
            title="Managing APIs"
            description="Learn how to create, read, update, and delete APIs in Postman."
            link="https://learning.postman.com/docs/postman/design-and-develop-apis/managing-apis/"
            icon=""
          />
          <LandingCard
            title="Sharing APIs"
            description="Learn how to share your APIs with members of your team on Postman."
            link="https://learning.postman.com/docs/postman/design-and-develop-apis/managing-apis/"
            icon=""
          />
          <LandingCard
            title="Versioning APIs"
            description="Learn how to manage multiple versions of your APIs with version tags."
            link="https://learning.postman.com/docs/postman/design-and-develop-apis/versioning-an-api/"
            icon=""
          />
        </div>
        <div className="row justify-content-center">
          <SecondaryCard
            title="Automate Your API Tests"
            description="Integrate Postman testing into your CI/CD pipeline."
            cta="Learn More"
            ctaLink="https://www.postman.com/automated-testing"
          />
          <SecondaryCard
            title="Case Studies"
            description="Discover how teams are using Postman in new and creative ways."
            cta="Learn More"
            ctaLink="https://www.postman.com/resources/case-studies/"
          />
          <SecondaryCard
            title="Postman for QA Teams"
            description="Simple and flexible automated testing solutions for QA teams."
            cta="Learn More"
            ctaLink="https://learning.postman.com/qa"
          />
        </div>
      </div>
    </section>

    <section className="row video-player">
      <div className="col-md-8">
        <ResponsiveEmbed
          src="https://www.youtube.com/embed/Ayo_KdLLcTA?list=PLM-7VG-sgbtBE0mqMBlAYNuqTkhJzFjlP"
          allowFullScreen
        />
      </div>
      <div className="col-md-4" style={{ paddingLeft: '32px' }}>
        <h2>Exploring API Documentation with Postman</h2>
        <p>
Postman’s API documentation feature lets you share public or private API documentation
          in a beautifully formated web page.
        </p>
        <p>See how to document your APIs with Postman.</p>
        <a className="link-style" href="/docs/postman/api-documentation/documenting-your-api/">Learn More</a>
      </div>
    </section>

    <section className="row">
      <div className="col-md-12 text-center " style={landingBottom}>
        <h2 style={landingBottomContent}>Didn&#39;t find what you&#39;re looking for?</h2>
        <a href="https://www.postman.com/support" className="btn btn__primary">Visit our Support Center</a>
      </div>
    </section>
  </Layout>
);

export default IndexPage;
